<template>
  <div class="container">
    <section>
      <form action="#">
          <p>看吧后台登录平台</p>
          <input type="text" placeholder="账号" v-model="account">
          <input type="password" placeholder="密码" v-model="pwd">
          <button type="button" @click="login">LOGIN</button>
      </form>
    </section>
  </div>
</template>

<script>
export default {
  data(){
    return {
      account:"",
      pwd:""
    }
  },
  methods:{
    login(){
      if(this.account.trim()==""){
        alert("账号不能为空！");
        return;
      }
      if(this.pwd.trim()==""){
        alert("密码不能为空！");
        return;
      }
      let obj = {
        "account":this.account,
        "pwd":this.pwd
      }
      this.$ajax({
        url:"admin/login",
        method:"post",
        data:obj
      }).then(resp=>{
        localStorage.setItem("adminInfo",JSON.stringify(resp.data.message))
        this.$router.push("/admin/"+resp.data.message[0].role_id)
      })
    }
  },
  created(){
    let adminInfo = JSON.parse(localStorage.getItem("adminInfo")||"[]");
    if(adminInfo.length>0){
      this.$router.push("/admin/"+adminInfo[0].id)
    }
  }
}
</script>

<style scoped>
.container{
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
}
section{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(94.3deg,rgba(26,33,64,1) 10.9%,rgba(81,84,115,1) 87.1%);
    overflow: hidden;
}
section::before{
    position: absolute;
    content: "";
    z-index: 2;
    width: 450px;
    height: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-100%,-80%);
    background-color: #FFE538;
    background-image: linear-gradient(147deg,#FFE538 0%,#FF2525 74%);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    animation: pulse 1.5s infinite;
}
section::after{
    position: absolute;
    content: "";
    z-index: 2;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(10%,20%);
    background-color: #FA8BFF;/* linear-gradient()第一个参数可以为读书，第二个参数中的第一个为颜色值，第二个为百分值 */
    background-image: linear-gradient(45deg,#FA8BFF 0%,#2BD2FF 52%,#2BFF88 90%);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    50%{
        box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
form{
    position: relative;
    z-index: 3;
    background-color: rgba(255, 255, 255, .1);/* 透明颜色 */
    padding: 45px 30px;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,.1);
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(20px);/* 背景模糊 */
}
form{
    color: #fff;
    display: block;
    text-align: center;
    margin: 0 0 30px 0;
}
input{
    width: 100%;
    height: 50px;
    border-radius: 8px;
    background-color: transparent; /* 背景透明 */
    border: 1px solid rgba(255, 255, 255, .5);
    margin-bottom: 15px;
    padding-left: 15px;
    color: #fff;
    outline: none;
}
input::placeholder{
    color: #fff;
}
button{
    width: 100%;
    height: 50px;
    border: 0;
    background-image: linear-gradient(to right,#02AAB0 0%,#00CDAC 51%,#02AAB0 100%);
    background-size: 200% auto;
    border-radius: 8px;
    color: #fff;
    outline: none;
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(0,0,0,.1);
    transition: ease .4s;
}
button:hover{
    background-position: right center;
    color: #fff;
    text-decoration: none;
}
</style>